<template>
  <div>
    <div style="width: 280px; margin: auto; text-align: center; font-size: 18px;color:red;">
      {{$t('业务员姓名')}}：{{ info.name }}
    </div>
    <div id="qrcode" ref="qrcode" style="width:270px;height270px;margin:auto">
      <img :src="imgSrc" style="width:270px;height270px;margin:auto" />
    </div>
    <div style="text-align: center; margin-top: 20px">
      <div>
        <a
          id="downloadImg"
          @click="downloadImg"
          style="padding: 7px;border-radius: 5px; color: #008dd9"
          >{{$t('下载')}}</a
        >
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import { postAction, getAction, downFile } from '@/api/manage'
export default {
  name: 'QrcodeModal',
  props: {
    info: {
      type: [Object],
      default: {},
    },
    url: {
      type: [String],
      default: '',
    },
    param: {
      type: [String],
      default: '',
    },
    paramValue: {
      type: [String],
      default: '',
    },
  },
  data() {
    return {
      imgSrc: '',
      list: {},

    }
  },
  mounted() {
    console.log(this.info)
    this.qrCode(this.info)
  },
  methods: {
    downloadImg() {
      let that = this
      var img = document.getElementById('qrcode').getElementsByTagName('img')[0]
      var canvas = document.createElement('canvas')
      canvas.width = 360
      canvas.height = 360
      var ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.font = 'normal 14px Arial'
      ctx.fillStyle = '#000'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(this.$t('业务员姓名') +'：' + that.info.name , 180, 20)
      ctx.drawImage(img, 30,30)
      var url = canvas.toDataURL('image/png')
      document.getElementById('downloadImg').setAttribute('href', url)
      document.getElementById('downloadImg').setAttribute('download', this.$t('推广码')+'--' + this.info.name + '.jpg')
    },
    qrCode(item) {
      let query = {}
      query.scene = 'salesmanId=' + item.id
      downFile(this.url, query).then(response => {
        let blob = new Blob([response], { type: 'image/jpeg' })
        let url = window.URL.createObjectURL(blob)
        this.imgSrc = url
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>